<template>
	<view class="search">
		<u-search color="#111111" shape="square" :clearabled="clearabled" :showAction="showAction"
			:placeholder="placeholder" v-model="keyword" @search="handleSearch" @custom="handleSearch"
			@clear="handleClear"></u-search>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			clearabled: {
				type: Boolean,
				default: true
			},
			showAction: {
				type: Boolean,
				default: true
			},
		},
		computed: {
			keyword: {
				get() {
					return this.value || ''
				},
				set(val) {
					this.$emit('update:value', val.trim())
				}
			},
		},
		methods: {
			handleSearch(val) {
				this.$emit('search', val.trim())
			},
			handleClear() {
				this.$emit('clear')
			},
		}
	}
</script>

<style scoped lang="scss">
	.search {
		width: 100%;
		background-color: #fff;
	}
</style>